<template>
  <div v-for="(item, index) in $state.current.docInfo.code"
    :key="index"
    :id="'__' + item.id"
    style="padding:20px"
  >
    <component
      v-if="item.id !== ''"
      :is="showcode[show]"
      :code="item"
    />
  </div>
</template>

<script>
/**
 * 显示多条可运行的代码，代码移动到文档对应位置
 */
  import { watch, ref, reactive } from 'vue'
  import codeItem from './code-show.vue'

</script>

<script setup>
  import { state } from '@naturefw/nf-state'

  const props = defineProps({
    codeList: Array // 运行代码的数组
  })

  const showcode = reactive({
    false: '',
    true: codeItem
  })

  const show = ref(false)

  watch(() => state.current.menuInfo.menuId, (id) => {
    //
    show.value = false
    setTimeout(() => {
      show.value = true
    }, 1000)
  }, {immediate: true})
 

</script>